<template>
  <view class="userCenterContainer">
    <view class="user-info flex-row">
      <image class="user-info-bg" mode="aspectFill" src="/static/img-user-bg.png"/>
      <view v-if="userInfo.avatarUrl" class="flex-grow-1 flex-y-center flex-row">
        <view class="flex-grow-0">
          <image class="avatar" :src="userInfo.avatarUrl"/>
        </view>
        <view class="flex-grow-1">
          <text class="user-name">{{userInfo.nickName}}</text>
        </view>
      </view>
      <view v-else class="flex-grow-1 flex-x-center flex-y-center flex-row">
        <navigator class="flex-grow-0" url="/pages/login/login">
          <button>授权登录</button>
        </navigator>
      </view>
    </view>
    <view class="list_box">
      <block v-for="(item,index) in listInfo" :key="index">
        <navigator :url="item.url" hover-class="none" class="list_item flex-row  flex-y-center">
          <view class="flex-grow-1 flex-left">{{item.title}}</view>
          <view class="flex-grow-1 flex-right">
            <image mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/more@2x.png"/>
          </view>
        </navigator>
      </block>
      <view class="list_item flex-row  flex-y-center">
        <view class="flex-grow-1 flex-left">联系电话</view>
        <view class="flex-grow-1 flex-right">
          <image mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/more@2x.png"/>
        </view>
      </view>
      <button class="button" plain="true">
        <view class="list_item flex-row  flex-y-center">
          <view class="flex-grow-1 flex-left">在线客服</view>
          <view class="flex-grow-1 flex-right">
            <image mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/more@2x.png"/>
          </view>
        </view>
      </button>
      <view class="list_item flex-row  flex-y-center">
        <view class="flex-grow-1 flex-left">我的收藏</view>
        <view class="flex-grow-1 flex-right">
          <image mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/more@2x.png"/>
        </view>
      </view>
      <view class="list_item flex-row  flex-y-center">
        <view class="flex-grow-1 flex-left">历史记录</view>
        <view class="flex-grow-1 flex-right">
          <image mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/more@2x.png"/>
        </view>
      </view>
      <button class="button" plain="true" >
        <view class="list_item flex-y-center">
          <view class="flex-grow-1 flex-left">授权设置</view>
          <view class="flex-grow-1 flex-right">
            <image mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/more@2x.png"/>
          </view>
        </view>
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    name: "userCenter",
    data(){
      return {
        listInfo: [
          {title: '关于我们', url: '/pages/about/about'},
        ],
        userInfo:{}
      }
    },
    onShow(){
      this.userInfo = uni.getStorageSync('userInfo');
    }
  }
</script>

<style scoped>
  /* pages/userCenter/userCenter.wxss */
  /*1*/
  .userInfobox {
    width: 100%;
    height: 300upx;
    background: #ff474f;
    color: #fff;
  }
  .userInfobox .userInfo .userinfo-avatar {
    width: 128upx;
    height: 128upx;
    border-radius: 50%;
    margin-bottom: 20upx;
  }
  .userInfobox .userInfo .userInfo-nickname {
    font-size: 28upx;
  }

  /*2*/
  .user-info{
    height: 268upx;
    color: #fff;
    position: relative;
  }
  .user-info .user-info-bg{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .user-info .avatar{
    width: 130upx;
    height: 130upx;
    border-radius: 99999upx;
    border: 5upx solid #fff;
    margin: 0 24upx;
  }
  .user-info .user-name{
    font-size:28upx;
    font-weight: bold;
  }

  /*list*/

  .list_box {
    background: #fff;
    margin-top: 18upx;
  }

  .list_item {
    padding-left: 47upx;
    padding-right: 30upx;
    height: 92upx;
    font-size: 28upx;
    color: #454545;
    border-bottom: 2upx solid #f2f2f2;
  }

  .list_item image{
    width: 20upx;
    height: 30upx
  }
  .button{
    padding:0;
  }
</style>